<template>
    <div class="an-eaditpwd">
      <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">

        <el-form-item label="旧密码" prop="odpwd">
          <el-input v-model="ruleForm2.odpwd"></el-input>
        </el-form-item>

        <el-form-item label="新密码" prop="pass">
          <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
          <el-button @click="resetForm('ruleForm2')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>

<script lang="ts">
  import { Component, Vue} from 'vue-property-decorator'
  import {login, forgetpwdnew} from '../../api/data.js'

  interface ObdiaVal {
    pass: string;
    checkPass:string;
    odpwd:string;
  }

  @Component
  export default class eaditPwd extends Vue {

    validateodpwd = (rule:any, value:string, callback:any) =>{
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        callback();
      }
    };

    validatePass = (rule:any, value:string, callback:any) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm2.checkPass !== '') {
          let el:any = this.$refs.ruleForm2;
          el.validateField('checkPass');
        }
        callback();
      }
    };

    validatePass2 = (rule:any, value:string, callback:any) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm2.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };

    idnumber:string = this.$store.getters.userInfo.idnumber;
    name:string = this.$store.getters.userInfo.name;
    ruleForm2:ObdiaVal = {
      odpwd: '',
      pass: '',
      checkPass: '',
    };
    rules2:object= {
      odpwd: [
        { validator: this.validateodpwd, trigger: 'blur' }
      ],
      pass: [
        { validator: this.validatePass, trigger: 'blur' }
        ],
      checkPass: [
        { validator: this.validatePass2, trigger: 'blur' }
        ],
    };


    submitForm(formName:any) {
      let el:any = this.$refs[formName];
      el.validate((valid:any) => {
        if (valid) {

          let name = this.name;
          let idnumber = this.idnumber;
          let pwd = this.ruleForm2.odpwd;
          let nwp = this.ruleForm2.pass;
          let nd = {
            idnumber: idnumber,
            password: nwp,
          }
          login(name,pwd).then((res:any)=>{

            forgetpwdnew(nd).then((res:any)=>{
              this.$message.success('修改成功');
              this.resetForm(formName);
            })

          })

        }
      });
    };
    resetForm(formName:any) {
      let el:any = this.$refs[formName];
      el.resetFields();
    }

  }
</script>

<style scoped>
.an-eaditpwd{
  padding: 20px;
  width: 600px;
  margin: 0 auto;
}
</style>
